<template>
	<!-- components/navber/index.wxml -->

	<!-- 父级-设置动态高度 -->
	<view class="navbar-parent" :style="'height:' + (navbar_height + change_height) + 'px'">
		<view :class="'navbar ~navbar ' + (navbarData.is_show_bottom ? 'navbar-bottom-radius' : '')"
			:style="'height:' + (navbar_height + change_height) + 'px;background:' + navbarBg + ';'" id="navbars">
			<!-- 背景图 -->
			<image :src="navbarData.bac_img + '.png'" class="navbar-bac-img" v-if="navbarData.is_show_bottom"
				:style="'height:' + (navbar_height + change_height) + 'px;'" />
			<view class="navbar-content" :style="'top:' + navbar_height + 'px;height:' + change_height + 'px;'">
				<!-- 搜索按钮 -->
				<view class="navbar-left-btn" @click="navbar_search" v-if="is_show_search">
					<image src="/static/assets/imgs/navbar/search.png" class="navbar-left-btn-search" />
				</view>
				<!-- 返回按钮 -->
				<view class="navbar-left-btn" @click="navbar_back_page" v-else>
					<image src="/static/assets/imgs/navbar/navvar_back.png" class="navbar-left-btn-back"
						v-if="is_show_backClone" />
					<image src="/static/assets/imgs/navbar/index.png" class="navbar-left-btn-back" v-if="indexShow" />
				</view>
				<!-- 标题 -->
				<view class="navbar-center-title">
					<view class="navbar-center-title-text" :style="'color:' + navbarData.titleColor">
						{{ navbarData.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// components/navber/index.js
	const app = getApp();
	export default {
		data() {
			return {
				// navbar_parent_height: app.globalData.navbarHeight, //父级高度
				indexShow: false,

				//是否显示首页
				tabBar: [{
						pagePath: 'pages/index/index'
					},
					{
						pagePath: 'pages/goodsType/index'
					},
					{
						pagePath: 'pages/cart/index'
					},
					{
						pagePath: 'pages/inventory/index'
					},
					{
						pagePath: 'pages/user/index'
					}
				],

				//底部路径
				isIphoneX: app.globalData.isIphoneX,

				navbar_parent_height: '',
				is_show_backClone: false
			};
		},
		props: {
			navbar_height: {
				// 状态栏高度
				type: Number,
				default: app.globalData.height
			},
			change_height: {
				// 变化高度
				type: Number,
				default: app.globalData.navbarHeight
			},
			is_show_back: {
				// 是否显示返回
				type: Boolean,
				default: false
			},
			is_show_search: {
				// 是否显示首页搜索
				type: Boolean,
				default: false
			},
			navbarBg: {
				type: String,
				default: '#ffffff'
			},
			navbarData: {
				// 标题
				type: Object,
				default: () => ({
					title: '商城',
					is_show_bottom: false,

					//显示背景
					bac_img: '',

					//背景图
					is_login: false,

					titleColor: '#000000'
				})
			}
		},
		methods: {
			//判断是否需要返回
			if_back: function() {
				var pages = getCurrentPages().length;

				if (pages > 1) {
					//大于1就显示
					this.setData({
						is_show_backClone: true
					});
				} else {
					if (!this.is_show_search) {
						//显示主页按钮
						var router = getCurrentPages();
						var tabBar = this.tabBar;
						var status = true;

						for (var i = 0; i < tabBar.length; i++) {
							if (tabBar[i].pagePath == router[0].route) {
								status = false;
								break;
							}
						}

						this.setData({
							indexShow: status
						});
					}
				}
			},

			//返回上一页
			navbar_back_page(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}
				if (this.indexShow) {
					//返回首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

			},

			navbar_index(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//返回首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			navbar_search(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//搜索商品
				uni.navigateTo({
					url: '/pages/search/index'
				});
			},

			get_height() {
				//获取内容宽度
				const query = uni.createSelectorQuery().in(this);

				const _this = this;

				query
					.select('#navbars')
					.boundingClientRect(function(res) {
						// console.log(res)
						if (res.height == 240) {
							_this.get_height(); //回调-获取正确高度
						}

						if (app.globalData.isGalaxy) {
							_this.setData({
								navbar_parent_height: res.height / 2
							});

							app.globalData.navbarHeight = res.height / 2;
						} else {
							_this.setData({
								navbar_parent_height: res.height
							});

							app.globalData.navbarHeight = res.height;
						}
					})
					.exec();
			}
		},
		mounted() {
			//加载完初始化
			this.if_back(); // this.get_height();

			this.setData({
				isIphoneX: app.globalData.isIphoneX
			});
		},
		watch: {
			is_show_back: {
				handler: function(newVal, oldVal) {
					this.is_show_backClone = newVal;
				},

				immediate: true
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
